<template>
  <div>
    <p class="likeyTitle">
      <span class="iconfont">&#xe641;</span>
      猜你喜欢
    </p>
    <div class="likeyList">
      <img src="//img1.qunarzz.com/sight/p0/1707/f6/f60edcaa8934d4fda3.img.jpg_200x200_37d0eedd.jpg" alt="">
      <ul>
        <li>天府花溪谷</li>
        <li>
          <div>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
          </div>
          <span>
            1029条评论
          </span>
        </li>
        <li>
            <span class="priceBox">
              ¥<span class="likeyPrice">39</span>
            </span>
            起
            <span class="direction">大邑县</span>
        </li>
      </ul>
    </div>
    <div class="likeyList">
      <img src="//img1.qunarzz.com/sight/p0/1707/f6/f60edcaa8934d4fda3.img.jpg_200x200_37d0eedd.jpg" alt="">
      <ul>
        <li>天府花溪谷</li>
        <li>
          <div>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
            <em class="iconfont">&#xe668;</em>
          </div>
          <span>
            1029条评论
          </span>
        </li>
        <li>
            <span class="priceBox">
              ¥<span class="likeyPrice">39</span>
            </span>
            起
            <span class="direction">大邑县</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default{
  name: 'Likey'
}
</script>
<style lang="scss" scoped>
@import "~styles/layout.scss";
.likeyTitle{
  @include flex(row);
  justify-content: flex-start;
  align-items: center;
  padding:20px 15px;
  font-size: 24px;
  background-color: #ffffff;
  margin-top: 20px;
  span{
    font-size: 26px;
    color: #f00;
    margin-right: 6px;
  }
}
.likeyList{
  @include flex(row);
  justify-content: flex-start;
  align-items: center;
  padding: 20px 20px;
  background-color: #ffffff;
  border-bottom:1px solid #dddddd;
  img{
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin-right: 15px;
  }
  ul{
    flex: 2;
    li{
      margin-bottom: 18px;
      &:first-child{
        font-size: 26px;
        color: #333;
      }
      &:nth-child(2){
        @include flex(row);
        justify-content: flex-start;
        align-items: center;
        font-size:20px;
        color: #666;
        div{
          margin-right: 30px;
           @include flex(row);
            justify-content: flex-start;
            align-items: center;
          em{
            color: #f00;
            font-size: 14px;
            margin-right: 8px;
          }
        }
      }
      &:last-child{
        position: relative;
        font-size: 18px;
        .priceBox{
        color: #ff8300;
        font-size: 18px;
        .likeyPrice{
          font-size: 28px;
        }
        }
        .direction{
          position: absolute;
          right: 0;
          bottom:0;
          color: #666;
          font-size: 18px;
        }
      }

    }
  }
}
</style>
